<template>
	<el-card shadow="hover" header="实时天气" class="item-background">
		<div class="time">
			<div style="display:inline-block;">
				<h2 style="display: inline-block">{{ cityInfo.parent}}</h2>
				<h3 style="display: inline-block;margin-left: 20px">{{ cityInfo.city}}</h3>
			</div>
			<div style="display:inline-block;float: right;color: #FFFFFF;" v-if="forecast.length>0">
				<span><span style="font-size: 18px;color: #ffffff;margin-right: 10px">{{ forecast[0].type}}</span>{{ forecast[0].low}}~{{ forecast[0].high}}
					<span style="margin-left: 10px">
						{{ forecast[0].fx}}{{ forecast[0].fl}}
					</span>
				</span>
				<p>{{ forecast[0].notice}}</p>
			</div>
		</div>
	</el-card>
</template>

<script>
import axios from "axios";

export default {
	title: "实时天气",
	icon: "el-icon-pouring",
	description: "获取当前天气",
	data() {
		return {
			cityInfo:{},
			forecast:[],
			time:''
		}
	},
	mounted() {
		this.getWeather()
	},
	methods: {
		async getWeather() {
			var res = await this.$API.system.getCitWeatherByClient.get();
			if (res.code == 200) {
				if(res.data.status==200)
				{
					this.cityInfo = res.data.cityInfo;
					this.forecast = res.data.data.forecast;
					this.time = res.data.time;
				}
			} else {
				console.log(res.message);
			}
		},
	}
}
</script>

<style scoped>
.item-background {background: linear-gradient(to right, #409eff, #4776E6);color: #fff;height: 138px}
.time h2 {font-size: 30px;}
</style>
